<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="__PUBLIC__/member/style/common.css" media="screen"/>
        <script type="text/javascript" src="__PUBLIC__/common/js/jquery.js"></script>
        <script type="text/javascript" src="__PUBLIC__/common/js/common.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".spot_box").click(function(){
                    var me_file = $(this).data("file");
                    var me_id = $(this).data("id");
                    parent.getNavbg(me_id,me_file);
                });

            });
        </script>
        <style>
            body{
                background: #f8f8f8;
            }
            .pick_btnbox{
                width: auto; height: 30px; margin: 12px 16px 4px 16px; overflow: hidden;
                font: bold 12px/30px "微软雅黑"; color: #199372; cursor: default;
            }
            .pick_top{
                width: auto; height: 24px; margin: 4px 24px 4px 24px; overflow: hidden;
                font: bold 12px/24px "微软雅黑"; color: #199372; cursor: default;
            }
            .pick_down{
                min-height: 340px; width: 680px; overflow: hidden; margin: 0 15px; border:1px solid #bbb;
                background: #fff; border-radius: 4px; padding: 4px;
            }
            .spot_box{
                width: 162px; height: 162px; overflow: hidden; border:1px solid #c6c6c6; background: #f3f3f3;
                float: left; margin: 3px; border-radius: 4px; border-bottom: 1px solid #bbb; cursor: pointer;
            }
            .spot_cube{
                width: 150px; height: 150px; overflow: hidden; background: url(__PUBLIC__/member/images/common/psbg.png) #fff;
                border:1px solid #c6c6c6; margin-top: 5px; margin-left: 5px;
            }
            .spot_box:hover{
                border-color: #4f94d9; background: #e0f7ff;
            }
            .spot_box:hover .spot_cube{
                border-color: #4f94d9;
            }
            .pick_page{
                width: auto; height: 30px; margin: 0px 20px 4px 20px; overflow: hidden;
            }
            .pickbuttom{
                width: 100px; height: 28px; overflow: hidden; border:1px solid #bbb; background: #fff; cursor: pointer;
                text-align: center; font: bold 12px/30px "微软雅黑"; color: #666; float: left; margin-right: 6px; display: block;
            }
            .pickbuttom:hover{
                text-decoration: none;
            }
            .pickbuttom.me{
                width: 100px; height: 28px; overflow: hidden; border:1px solid #4f94d9; background: #e0f7ff; cursor: pointer;
                text-align: center; font: bold 12px/30px "微软雅黑"; color: #4f94d9; float: left; margin-right: 6px;
            }
            .movebox{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="pick_btnbox">
            <a href="{:U('selNavbg',array('mode'=>system))}" <if condition="$mode eq 'system'">class="pickbuttom me"<else/>class="pickbuttom"</if>>系统默认样式</a>
            <a href="{:U('selNavbg',array('mode'=>self))}" <if condition="$mode eq 'self'">class="pickbuttom me"<else/>class="pickbuttom"</if>>我上传的样式</a>
        </div>
        <div class="pick_top">提示：点击样式图标，即可选择生效。</div>
        <div class="pick_down">
            <volist name="list" id="vo">
                <div class="spot_box" data-file="{$vo.file}" data-id="{$vo.id}">
                    <div class="spot_cube"><div class="movebox" style="width: {$vo.width}px; height: {$vo['height']}px; margin-left: {$vo['width']*(-1)/2+75}px; margin-top: {$vo['height']*(-1)/2+75}px;"><img src="{:CC('web_root')}{$vo.file}" /></div></div>
                </div>
            </volist>
        </div>
   
    </body>
</html>
